<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="popup.js"></script>
		<!-- <script src="ht.js"></script>
		<script type="text/javascript" charset="utf-8" async="" src="ht2.js"></script> -->
		<style>
			.switch {
				position: relative;
				display: inline-block;
				width: 35px;
				height: 18px;
			}

			.switch input {
				display: none;
			}

			.slider {
				position: absolute;
				cursor: pointer;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #ccc;
				-webkit-transition: .4s;
				transition: .4s;
				border-radius: 34px;
			}

			.slider:before {
				position: absolute;
				content: "";
				top: 3px;
				height: 12px;
				width: 12px;
				left: 4px;
				bottom: 4px;
				background-color: white;
				-webkit-transition: .4s;
				transition: .4s;
				border-radius: 50%;
			}

			input:checked+.slider {
				background-color: #2196F3;
			}

			input:focus+.slider {
				box-shadow: 0 0 1px #2196F3;
			}

			input:checked+.slider:before {
				-webkit-transform: translateX(15px);
				-ms-transform: translateX(15px);
				transform: translateX(15px);
			}
		</style>
	</head>
	<body style="width: 304px;padding: 9px;margin: 0;padding-top: 0px;">

		<div
			style="display: flex;flex-direction: column;align-items: flex-start;width: 100%;padding: 8px;box-sizing: border-box;">
			<div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
				<h3 style="margin: 10px 0;">文字高亮识别</h3>
				<div style="margin-top: 2px;">
					<label class="switch">
						<input id="openOrclose" type="checkbox">
						<span class="slider"></span>
					</label>
				</div>
			</div>
			<div id="boxSet" style="width: 100%;">
				<div class="select" style="100%">
					<div style="margin-top: 5px;width: 100%;">
						<textarea style="max-width: 98%;min-width: 98%;width: 98%;font-size: 12px;height: 48px;"
							placeholder="类别关键字使用英文逗号分割如 a,b,c" class="keywords"></textarea>
					</div>
					<div style="display: flex;align-items: center;margin-top: 5px;width: 100%;">
						<span style="font-size: 12px;">字体颜色</span><input style="margin-left: 5px;" value="#e43525"
							type="color" class="forecolor" name="" id="">
						<span style="margin-left: 15px;font-size: 12px;">背景颜色</span><input value="#fcff2d"
							style="margin-left: 5px;" type="color" class="bgccolor" name="" id="">
						<button class="remove"
							style="background-color: #909399; width: 50px;height: 22px;border: 0;border-radius: 6px;color: #fff;font-size: 12px;margin-left: 16px;">删除</button>
					</div>
					<hr style="width: 100%;">
				</div>

			</div>
			<div style="width: 100%;display: flex;align-items: center;">
				<span style="font-size: 12px;margin-right: 8px;">字体大小</span>
				<div style="display: flex;
			                            padding: 8px;
										padding-right: 0;
			                            border-radius: 8px;
			                            align-items: center;
			                            flex: 1;
										box-sizing: border-box;
			                          ">
					<span style="font-size: 12px" id="myfontsizeValue">默认</span>
					<input id="myfontsize" style="margin-left: 8px; flex: 1;" type="range" min="0" max="30" value="0"
						step="1" v-model="FrequencyPenalty" />
				</div>
			</div>
			<div style="margin-top: 13px;">
				<button id="addNew"
					style="background-color: #589cfd; width: 70px;height: 29px;border: 0;border-radius: 6px;color: #fff;font-size: 12px;margin-right: 10px;">新增类别</button>
				<button id="save"
					style="background-color: #6fc140; width: 70px;height: 29px;border: 0;border-radius: 6px;color: #fff;font-size: 12px;margin-right: 10px;">保存</button>

			</div>
		</div>


 
	</body>


</html>